<!--
 * new page
 * @author: zhuangming
 * @since: 2025-03-04
 * detail.vue
-->
<template>
  <view class="container">
    <!-- <image class="detail-header" :src="imgurl + detailData.merBanner"></image> -->
    <u-swiper height="440rpx" imgMode="contain" :list="detailData.merBanner" indicator indicatorMode="line" circular></u-swiper>
    <view class="detail-content">
      <view class="detail-title">
        <span style="font-family: PingFangSC, PingFang SC; font-weight: 500; font-size: 32rpx; color: #1a1a1a; line-height: 45rpx; text-align: left; font-style: normal">
          {{ detailData.merName || "" }}</span
        >

        <!-- <span style="font-size: 22rpx; color: darkgray; margin-left: 10px">进入店铺>></span> @click="gotoDetail()" -->
      </view>
      <view style="display: flex; align-items: center; justify-content: space-between">
        <view style="display: flex; flex-direction: column; align-items: flex-start">
          <view>
            <view v-for="(category, index) in detailData.categoryName" :key="index" style="margin: 0 10rpx 10rpx 0; display: inline-block">
              <text style="font-size: 20rpx; color: #fe7f41; background-color: #fff1eb; padding: 3px 6px">{{ category }}</text>
            </view>
          </view>
          <view
            style="
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #1a1a1a;
              line-height: 33rpx;
              text-align: left;
              font-style: normal;
              display: flex;
              align-items: center;
            "
          >
            <image style="width: 28rpx; height: 28rpx" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/shijian-3@2x_20250321163041A002.png" mode="aspectFit"></image
            ><span style="margin-left: 10rpx">营业时间：{{ detailData.businessTime || "商家暂未配置~" }}</span>
          </view>
        </view>
        <view v-if="detailData.merPhone" @click="makeCall" style="display: flex; flex-direction: column; align-items: center">
          <image style="width: 48rpx; height: 48rpx; margin-bottom: 4rpx" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/phone_20250321152906A002.png"> </image>
          <view style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #1a1a1a; line-height: 33rpx; text-align: left; font-style: normal"> 电话 </view>
        </view>
      </view>
      <view style="margin: 20rpx 0"> <u-line></u-line></view>

      <view
        style="
          display: flex;
          align-items: st;
          margin-top: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #1a1a1a;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        "
      >
        <u-icon name="map" labelSize="30rpx"></u-icon>
        <span @click="gotoDaohang(detailData)" style="display: flex; align-items: center; margin-left: 10rpx"> {{ detailData.merAddress || "" }} </span>
      </view>
    </view>
    <div style="width: 100%; height: 35px; line-height: 35px; margin: 20rpx 0">
      <u-tabs
        :activeStyle="{
          color: '#FA642F',
        }"
        :list="list1"
        @click="onchangetab"
        lineColor="#FA642F"
        lineHeight="8rpx"
        lineWidth="56rpx"
        :itemStyle="{ width: '150rpx' }"
      ></u-tabs>
    </div>

    <tabActive
      v-show="tabs == '活动'"
      class="product-con"
      :activeData="activeData"
      :businessId="id"
      :type="type"
      :shareMerIdBack="shareMerIdBack"
      :seeButton="seeButton"
      :iddd="iddd"
      :userType="userType"
      :yaoiqngID="yaoiqngID"
    />
    <!-- </view> -->
    <TabSay v-show="tabs == '店铺评价'" :praiseList="praiseList" />
    <tabDetail v-show="tabs == '详情' && okok" :detailImg="detailData.merInfo || ''" />
    <view class="detail-footer-container">
      <view class="footer-buttons-wrapper">
        <view class="button-group">
          <view class="button-item" @click="makeCall" v-if="detailData.merPhone">
            <u-icon size="40" name="phone" />
            <text class="button-text">电话</text>
          </view>
          <!-- <view class="button-item" @click="reviewOrder">
            <u-icon size="40" name="chat-fill" />
            <text class="button-text">店铺评价</text>
          </view> -->
          <view class="button-item" @click="gotoDaohang(detailData)">
            <u-icon size="40" name="map" />
            <text class="button-text">导航</text>
          </view>
        </view>
        <view class="action-button" @click="onPay" v-if="seeButton">
          <image class="action-button" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/kjmd_20250321164306A003.png"> </image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserInfo } from "../../../utils/request_api.js"; /* 登录界面挪动接口 */
import { getMerInfoByid } from "../../../utils/api/local";
import TabSay from "./tabSay.vue";
import tabDetail from "./tabDetail.vue";
import tabActive from "./tabActive.vue";
import { IMG_URL } from "../../../config/index";
// 坐标转换函数
function wgs84togcj02(lat, lng) {
  if (outOfChina(lat, lng)) {
    return [lat, lng];
  }
  let dLat = transformLat(lng - 105.0, lat - 36.0);
  let dLng = transformLng(lng - 105.0, lat - 36.0);
  let radLat = (lat / 180.0) * Math.PI;
  let magic = Math.sin(radLat);
  magic = 1 - 0.00669342162296594323 * magic * magic;
  let sqrtMagic = Math.sqrt(magic);
  dLat = (dLat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtMagic)) * Math.PI);
  dLng = (dLng * 180.0) / ((6378245.0 / sqrtMagic) * Math.cos(radLat) * Math.PI);
  let mgLat = lat + dLat;
  let mgLng = lng + dLng;
  return [mgLat, mgLng];
}

function outOfChina(lat, lng) {
  if (lng < 72.004 || lng > 137.8347) return true;
  if (lat < 0.8293 || lat > 55.8271) return true;
  return false;
}

function transformLat(x, y) {
  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
  ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0;
  ret += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0;
  ret += ((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0;
  return ret;
}

function transformLng(x, y) {
  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
  ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0;
  ret += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0;
  ret += ((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0;
  return ret;
}
export default {
  components: {
    TabSay,
    tabDetail,
    tabActive,
  },
  data() {
    return {
      seeButton: "",
      okok: false,
      imgurl: IMG_URL,
      tabs: "活动",
      id: "" /* 商户id */,
      detailData: {},
      activeData: [],
      praiseList: [],
      list1: [{ name: "活动" }, { name: "详情" }, { name: "店铺评价" }],
      shareMerIdBack: "",
      type: "",
      iddd: "",
      yaoiqngID: "",
      userType: "",
      isLaundry: "",
    };
  },
  onLoad(option) {
    console.log("🚀 ~ onLoad ~ option:", option);
    this.seeButton = this.$globalData.seeButton;
    const q = decodeURIComponent(option.q);
    console.log("🚀 ~ onLoad ~ q:", q);
    if (q != undefined && q != null && q != "" && q != "undefined" && q != "null") {
      this.iddd = q.split("/")[q.split("/").length - 1].split("-")[0];
      if (this.iddd == 10086) {
        this.yaoiqngID = q.split("/")[q.split("/").length - 1].split("-")[1];
        this.id = q.split("/")[q.split("/").length - 1].split("-")[2];
        /*    this.activeId = q.split("/")[q.split("/").length - 1].split("-")[3]; */
        this.isLaundry = q.split("/")[q.split("/").length - 1].split("-")[4];
        this.userType = q.split("/")[q.split("/").length - 1].split("-")[5];
      } else {
        this.id = q.split("/")[q.split("/").length - 1].split("-")[0];
        this.type = q.split("/")[q.split("/").length - 1].split("-")[1];
      }
    } else {
      this.id = option.id || option.shareMerIdBack || businessId;
      this.type = option.type;
      /*     this.activeId = option.id; */
      this.isLaundry = option.isLaundry;
      this.iddd = option.iddd;
      this.yaoiqngID = option.yaoiqngID;
    }
    this.shareMerIdBack = this.id;
    this.$nextTick(() => {
      this.getDetail(this.id);
      this.okok = true;
    });
  },
  // onShow() {
  //   this.userInfo = uni.getStorageSync("userInfo");
  //   setTimeout(() => {
  //     this.gologin(); // 登录验证
  //   }, 1500);
  // },
  methods: {
    onShareAppMessage(res) {
      return {
        title: "注册即得200补贴!",
        path: "/pages_h5/index/components/detail?shareMerIdBack=" + this.id + "&type=" + 1,
        // imageUrl: '/static/share.png'
      };
    },
    gotoDaohang(data) {
      let [gcjLat, gcjLng] = wgs84togcj02(Number(data.lat), Number(data.lng));
      uni.openLocation({
        latitude: Number(gcjLat), // 要去的纬度-地址
        longitude: Number(gcjLng), // 要去的经度-地址
        address: data.merAddress, // 要去的具体地址
        // name: data.merName, // 名称
      });
      // uni.navigateTo({
      // 	url: '/pages_h5/map/index?address=' + data.merAddress + '&longitude=' + gcjLng + '&latitude=' + gcjLat
      // })
    },
    // gologin() {
    //   if (this.userInfo === "您的登录已过期，请重新登录" || this.userInfo === "") {
    //     uni.showModal({
    //       title: "智享优圈欢迎您",
    //       content: "您还未登录，暂时不能使用全部功能",
    //       success: function (res) {
    //         if (res.confirm) {
    //           uni.switchTab({
    //             url: "/pages_h5/myCenter/index",
    //           });
    //         } else {
    //           uni.switchTab({
    //             url: "/pages_h5/myCenter/index",
    //           });
    //         }
    //       },
    //     });
    //     setTimeout(() => {
    //       uni.switchTab({
    //         url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
    //       });
    //     }, 1500);
    //   }
    // },
    async onPay() {
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showModal({
          title: "提示",
          content: "您的登录已过期或未登录，请重新登录。",
          success: (res) => {
            if (res.confirm) {
              if (this.iddd == 10086) {
                /* 新水卡规则 */
                uni.setStorageSync("iddd", this.iddd);
                uni.setStorageSync("ebMerId", this.yaoiqngID);
                uni.setStorageSync("userType", 3);
                uni.setStorageSync("activeId", this.activeId);
                uni.setStorageSync("isLaundry", this.isLaundry);
                uni.setStorageSync("businessId", this.id);
                uni.setStorageSync("yaoiqngID", this.yaoiqngID);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              } else {
                uni.clearStorage();
                uni.setStorageSync("ebMerId", this.shareMerIdBack);
                uni.setStorageSync("userType", "1");
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              }
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: "/pages_h5/index/components/pay_bill?id=" + this.id,
      });
    },
    //点击电话按钮
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.detailData.merPhone,
      });
    },
    //基本信息
    getDetail(id) {
      getMerInfoByid({
        id,
      }).then((res) => {
        this.detailData = res.data.ebMer || {};
        this.detailData.businessTime = res.data.ebMer.businessTime ? res.data.ebMer.businessTime.split(",").join(" - ") : "商家暂未配置~";
        this.detailData.categoryName = res.data.categoryName.split(",");
        this.detailData.merBanner = res.data.ebMer.merBanner ? res.data.ebMer.merBanner.split(",") : [];
        var b = [];
        this.detailData.merBanner.forEach((item) => {
          b.push(IMG_URL + item);
          item = IMG_URL + item;
        });
        this.detailData.merBanner = b;

        this.activeData = res.data.activityList || [];
        uni.setNavigationBarTitle({
          title: this.detailData.merName || "",
        });
        if (res.data.storeProductReplyList && res.data.storeProductReplyList.length > 5) {
          this.praiseList = (res.data.storeProductReplyList || []).slice(0, 5);
        } else {
          this.praiseList = res.data.storeProductReplyList || [];
        }
      });
    },
    //点击tab切换
    onchangetab(e) {
      this.tabs = e.name;
    },
    gotoDetail() {
      uni.navigateTo({
        url: `/pages_h5/index/components/detailLogin?id=${this.detailData.defMerActiveId}&businessId=${this.detailData.id}&type=1`, // 假设你需要传递活动ID
      });
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 90vh;
  /* overflow: hidden; */
  overflow-y: auto;
}

.detail-header {
  height: 500rpx;
  width: 100%;
  z-index: -1;
}

.detail-content {
  background: #ffffff;
  box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(62, 109, 201, 0.15);
  border-radius: 30rpx;
  padding: 15px;
  border-radius: 12px;
  width: 85%;
  margin: 0 auto;
  margin-top: -60px;
  z-index: 10;
  position: relative;
  /* 添加 position 属性 */
}

.detail-footer-container {
  position: fixed;
  bottom: 0;
  z-index: 100;
  background-color: #ffffff;
  width: 100%;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}

.footer-buttons-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}

.button-group {
  display: flex;
  align-items: center;
}

.button-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16px;
}

.button-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #9f9d99;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
}

.action-button {
  width: 213rpx;
  height: 92rpx;
}
</style>
